<html>

    <head>
        <meta charset="utf-8">
        <title>
            撅の検索
        </title>
        <style>
            body{
                background-image: url('images/background.jpg');
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-size: 100% 100%;
            }
            .top-nav{
                height: 70px;
                background-color: rgba(24, 24, 24, 0.2);
                display: flex;
            }
            .top-left-bars{
                height: 50px;
                position: relative;
                display: flex;
                padding-top: 10px;
                padding-bottom: 10px;
                padding-left: 24px;
                flex: 4;
            }
            .top-left-bars>.navigation-bar{
                margin-left: 10px;
                margin-right: 10px;
                display: flex;
                justify-content:center;
                align-items:center;
                color: rgb(255,255,255, 0.8);
                text-decoration: none;
            }

            .top-right-bars{
                height: 50px;
                position: relative;
                display: flex;
                justify-content: end;
                align-items: center;
                padding-top: 10px;
                padding-bottom: 10px;
                padding-left: 24px;
                flex: 1;
            }
            .top-right-bars>.navigation-bar{
                margin-left: 10px;
                margin-right: 10px;
                display: flex;
                justify-content:center;
                align-items:center;
                color: rgb(255,255,255, 0.8);
                text-decoration: none;
            }


            .center-box{
                width: 654px;
                height: 100%;
                margin: 0 auto;
                text-align: left;
                z-index: 100;
            }
            .logoAndSearch{
                height: 60%;
                min-height: 150px;
                max-height: 280px;
                position: relative;
                z-index: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }
            .logoPic{
                width: 270px;
                aspect-ratio: auto 270 / 129;
                height: 129px;
            }
            .search{
				margin-top: 30px;	
                flex-direction: row;
            }
            input{
                width: 500px;
                height: 50px;
                border-radius: 10px 1px 1px 10px;
            }
            #sr{
				width: 108px;
				height: 50px;
				background-color:#4E6EF2;
				border-radius: 1px 10px 10px 1px;
				float: right;
                font-size: 17px;
                color: rgb(255,255,255, 0.8);
                cursor: pointer;
			}
            .bottomCenter{
				margin-top: 10px;
                margin-left: 30px;
            }
            .hotSearch{
                margin-bottom: 150px;
            }
            .hotSearch ol li{
				width: 290px;
				height: 36px;
				float: left;
                color: rgba(255, 255, 255, 0.8);
            }
            .hotSearch a{
				color: rgba(255, 255, 255, 0.8);
				font-size: 16px;
				text-decoration: none;
            }
            #picBox{
                width: 600px;
                height: 450px;
                margin: 0 auto;
                display: flex;
                justify-content: center;
                align-items: center;
                background: url("images/pic_1.jpg") no-repeat;
                background-size:contain;
                transition: all 1s;
                position: relative;
            }
            .icon_left{
                position: absolute;
                width: 50px;
                height: 50px;
                top: 35%;
                left:20px;
            }
            .icon_right{
                position: absolute;
                width: 50px;
                height: 50px;
                top: 35%;
                right:20px;
            }
        </style>

        <script>
            var i=1;//表示当前图片所在位置
            var time = setTimeout("showImg()", 3000);//启动时钟事件刷新时间，参数毫秒
            function icon_left()
            {
                //清除时钟事件
                clearTimeout(time)
                if(i<=1)
                {
                    i=4;
                }
                else
                {
                    i=i-2;
                }
                console.info(i)
                showImg()
            }
            function icon_right()
            {
                //清除时钟事件
                clearTimeout(time)
                showImg()
            }
            //让背景图片显示
            function showImg()
            { 
                i++;
                if(i == 6)//5表示图片有5张1\2\3\4\5
                {
                    i = 1;
                }
                //通过id获取标签并修改背景样式
                document.getElementById("picBox").style.background = "url( images/pic_" + i + ".jpg) no-repeat";
                document.getElementById("picBox").style.backgroundSize = "contain";
                //启动时钟事件刷新时间,参数毫秒
                time = setTimeout("showImg()", 3000);
            }
        </script>
    </head>

    <body>
        <div class="top-nav">
            <div class="top-left-bars">
                <a href="" class="navigation-bar">新闻</a>                        
                <a href="" class="navigation-bar">hao123</a>
                <a href="" class="navigation-bar">地图</a>
                <a href="" class="navigation-bar">贴吧</a>
                <a href="" class="navigation-bar">视频</a>
                <a href="" class="navigation-bar">图片</a>
                <a href="" class="navigation-bar">网盘</a>
                <a href="" class="navigation-bar">更多</a>             
            </div>
            <div class="top-right-bars">
                <a href="">
                    <img src="images/biao.png" style="width: 50px;
                    height: 50px; margin-right: 15px;">
                </a>
                <a href="" class="navigation-bar">设置</a>
                <button type="submit" class="navigation-bar" style="
                    width: 60px;
                    height: 32px;
                    background-color:#53a3ed;
                    cursor: pointer;
                    border-radius: 10px 10px 10px 10px;">
                    登录
                </button>
            </div>
        </div>

        <div class="center-box">
            <div class="logoAndSearch">
                <img class = "logoPic" src="images/logo.png">
                <span class="search">
                    <input type="text">
                    <button id = sr type="submit">搜索一下</button>
                </span>
            </div>
            <div class="bottomCenter">
                <h4 id="hhhhh">
                    <a href="" style="text-decoration: none; color: rgb(255,255,255, 1);">Hot検索 ></a>
                </h4>
                <div class="hotSearch">
                    <ol>
                        <li><a href="">老八蜜汁餐厅上市</a></li>
                        <li><a href="">蔡徐坤回应粉丝要求</a></li>
                        <li><a href="">TFBOYS十年之约</a></li>
                        <li><a href="">原神，启动！</a></li>
                        <li><a href="">上古卷轴5爱的实验室</a></li>
                        <li><a href="">震惊：某男子深夜打呼噜</a></li>
                    </ol>
                </div>
                <div id="picBox">
                    <img class="icon_left" src="images/icon_left.png" onclick="icon_left()" style="cursor: pointer;">
                    <img class="icon_right" src="images/icon_right.png" onclick="icon_right()" style="cursor: pointer;">
                </div>
            </div>
        </div>    
    </body>

</html>